Skip to main content

什么是 React Fiber

是什么​

React Fiber 是一个类似双向链表的数据结构；ReactDom 会根据 jsx，为每个 dom 节点生成一个 fiber 节点，child 指向第一个子节点、sibling 指向下一个兄弟节点、return 指向父节点的数据结构就是 fiber 数据结构。

const fiber = {
  stateNode,// dom节点实例
  child,// 当前节点所关联的子节点
  sibling,// 当前节点所关联的兄弟节点
  return// 当前节点所关联的父节点
}

reactDom 会根据 jsx，为每个 dom 节点生成一个 fiber 节点，(注意：当 textNode 是唯一的子节点时，不会单独生成 fiber 节点)，child 指向第一个子节点，sibling 指向下一个兄弟节点，return 指向父节点。这样的数据结构就是 fiber 数据结构，当然 fiber 中还有存储了其他数据。

解决了什么问题​

  1. React V15 在渲染时，会递归比对 虚拟树，找出需要变动的节点，然后同步更新它们。
  2. 这个过程期间， React 会占据浏览器资源，这会导致用户触发的事件得不到响应，并且会导致掉帧，导致用户感觉到卡顿。

所以 React 通过 Fiber 架构，让这个执行过程变成可被中断。“适时”地让出 CPU 执行权，除了可以让浏览器及时地响应用户的交互，

react-fiber 产生的根本原因，是大量的同步计算任务阻塞了浏览器的 UI 渲染。

优点​

  1. 分批延时对 DOM 进行操作，避免一次性操作大量 DOM 节点，可以得到更好的用户体验；
  2. 给浏览器一点喘息的机会，它会对代码进行编译优化（JIT）及进行热代码优化，或者对 reflow 进行修正。

参考文章​